<script>
import { defineComponent, watch, ref, computed } from 'vue';
import { createNamespace } from '../utils';
import FanIcon from '../icon/icon.vue';
import FanLoading from '../loading/loading.vue';

export default defineComponent({
  name: createNamespace('Toast')[0],
  components: { FanIcon, FanLoading },
  emits: ['update:show'],
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    message: String,
    icon: {
      type: String,
      default: 'none',
      validator: (val) => ['none', 'success', 'error', 'loading'].includes(val),
    },
    duration: {
      type: Number,
      default: 2000,
    },
    delay: {
      type: Number,
      default: 0,
    },
    mask: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, { emit }) {
    const innerShow = ref(props.show);

    const showIconType = computed(() => {
      const { icon } = props;
      if (icon === 'none') {
        return 'none';
      } else if (icon === 'loading') {
        return 'loading';
      } else {
        return 'icon';
      }
    });

    let timer;
    watch(
      () => props.show,
      (val) => {
        if (timer) clearTimeout(timer);
        if (val && props.delay) {
          timer = setTimeout(() => {
            innerShow.value = val;
          }, props.delay);
        } else {
          innerShow.value = val;
        }
      },
    );

    watch(innerShow, (val) => {
      emit('update:show', val);
      if (val && props.duration > 0)
        setTimeout(() => (innerShow.value = false), props.duration);
    });

    return { showIconType, innerShow };
  },
});
</script>

<template>
  <transition name="fan">
    <div v-if="innerShow">
      <div
        v-if="mask && showIconType === 'loading'"
        class="fan-toast__mask"
      ></div>
      <div
        class="fan-toast fan-flex-center fan-flex-col"
        :class="icon === 'none' ? 'fan-toast--text' : 'fan-toast--icon'"
      >
        <FanIcon
          v-if="showIconType === 'icon'"
          :name="icon === 'success' ? 'check' : 'exclamation'"
          size="36"
          color="#fff"
        />
        <FanLoading
          v-else-if="showIconType === 'loading'"
          color="#fff"
          size="36"
        />
        <div class="fan-toast__text">{{ message }}</div>
      </div>
    </div>
  </transition>
</template>

<style lang="less">
.fan-enter-active,
.fan-leave-active {
  transition: opacity 0.3s ease;
}

.fan-enter-from,
.fan-leave-to {
  opacity: 0;
}

.fan-toast {
  width: fit-content;
  max-width: 80%;
  font-size: 14px;
  padding: 8px 12px;
  min-width: 96px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  box-sizing: content-box;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: 8px;
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  z-index: 10000;

  &__text {
    margin-top: 8px;
  }

  &__mask {
    background-color: transparent;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  &--text {
    .fan-toast__text {
      margin-top: 0;
    }
  }

  &--icon {
    min-height: 104px;
  }
}
</style>
